<template>
    <div class="wrap normal">
        <!-- 搜索条件 -->
        <div class="wrap-form" id="wrap-form">
            <div class="left-panel">
                <el-form :inline="true" :model="form" label-width="100px" @submit.native.prevent>
                    <el-form-item label="代理商手机号">
                        <el-input v-model="form.mobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="提现类型">
                        <el-select v-model="form.withdrawType" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in withdrawTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提现状态">
                        <el-select v-model="form.status" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in withdrawStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="pageOperate('search')">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="pageOperate('refresh')">刷新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 列表 -->
        <div class="wrap-table">
            <el-table :data="tableData" :max-height="tableMaxHeight" border v-loading="tableLoading" :header-cell-style="{ background: '#F5F6FA' }">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="userMobile" label="用户手机号" min-width="100"> </el-table-column>
                <el-table-column prop="agentUserName" label="代理商姓名" min-width="100"> </el-table-column>
                <el-table-column prop="agentLevelName" label="用户身份" min-width="120"> </el-table-column>
                <el-table-column prop="variableAmount" label="提现金额" min-width="100"> </el-table-column>
                <el-table-column prop="statusName" label="提现状态" min-width="100"></el-table-column>
                <el-table-column prop="auditRemark" label="提现被拒原因" min-width="160"></el-table-column>
                <el-table-column prop="withdrawTypeName" label="提现类型" min-width="120"></el-table-column>
                <el-table-column label="打款凭证" min-width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px; cursor: pointer" :src="scope.row.paymentVoucherUrl" fit="fill" :preview-src-list="[scope.row.paymentVoucherUrl]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="发起提现时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="审核时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.auditDate | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="打款时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.remitDate | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="pageOperate('audit', scope.row)" :disabled="scope.row.status !== 0">提现审核</el-button>
                        <el-button type="text" @click="pageOperate('pay', scope.row)" :disabled="scope.row.status !== 2">打款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="page.totalNum" :page.sync="page.pageNum" :limit.sync="page.pageSize" layout="total, sizes, prev, pager, next, jumper" @pagination="getTableData" />
        </div>
        <!-- 操作 -->
        <el-dialog v-if="operateDialog" :title="operateTitle" :visible.sync="operateDialog" @close="closeOperateDialog" :width="`${operateWidth}px`" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form ref="operateForm" :model="operateForm" :rules="operateRules" label-width="110px">
                <template v-if="operateType === 'audit'">
                    <el-form-item label="提现状态" prop="status">
                        <el-select v-model="operateForm.status" clearable placeholder="请选择" style="width: 100%">
                            <el-option v-for="item in withdrawStatusOptions.filter(item => item.value !== 0)" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提现失败原因" prop="auditRemark" v-if="operateForm.status === 1">
                        <el-input v-model="operateForm.auditRemark" clearable type="textarea" :rows="3" placeholder="请输入"></el-input>
                    </el-form-item>
                </template>
                <template v-if="operateType === 'pay'">
                    <el-form-item label="打款凭证截图" prop="paymentVoucherUrl">
                        <UploadPhotoList formKey="paymentVoucherUrl" :uploadedUrl="operateForm.paymentVoucherUrl" :showLimit="true" :limitNum="1" :showSize="true" :limitSize="5" :showType="true" @update-form="updateForm(arguments)"></UploadPhotoList>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeOperateDialog">取 消</el-button>
                <el-button type="primary" :loading="operateLoading" @click="operateSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import tableHeight from '@/mixins/tableHeight'
import { getWithdrawList, postWithdrawAuditData, postWithdrawPayData } from '@/api/finance'
import { withdrawTypeOptions, withdrawStatusOptions } from '@/filters/options'
import UploadPhotoList from '@/components/upload/uploadPhotoList.vue'
export default {
    name: 'FinanceWithdraw',
    mixins: [tableHeight],
    components: {
        UploadPhotoList
    },
    data() {
        return {
            form: {
                mobile: '',
                status: '',
                withdrawType: ''
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                totalNum: 0
            },
            tableData: [],
            tableLoading: false,
            // 类型
            operateType: '',
            // 标题
            operateTitle: '',
            // 弹框
            operateDialog: false,
            // 宽度
            operateWidth: 550,
            // loading
            operateLoading: false,
            // 操作form
            operateForm: {
                id: '',
                // 提现状态
                status: '',
                // 提现失败原因
                auditRemark: '',
                // 打款凭证
                paymentVoucherUrl: ''
            },
            operateRules: {
                status: [
                    { required: true, message: '请选择提现状态', trigger: ['blur', 'change'] }
                ],
                auditRemark: [
                    { required: true, message: '请输入提现失败原因', trigger: ['blur'] }
                ],
                paymentVoucherUrl: [
                    { required: true, message: '请上传打款凭证截图', trigger: ['blur', 'change'] }
                ]
            },
            withdrawTypeOptions,
            withdrawStatusOptions
        };
    },
    methods: {
        // 上传图片子组件通信
        updateForm(uploadData) {
            this.operateForm[uploadData[0]] = uploadData[1]
            this.$refs.operateForm.validateField(uploadData[0]);
        },
        // 数据
        getTableData() {
            this.tableLoading = true
            const data = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                ...this.form
            }
            getWithdrawList(data).then(res => {
                this.tableLoading = false
                this.tableData = res.data.records
                this.page.totalNum = res.data.total
            }).catch(error => {
                this.tableLoading = false
            })
        },
        // 操作
        pageOperate(type, row) {
            this.operateType = type
            switch (type) {
                case 'search':
                    this.getTableData()
                    break;
                case 'refresh':
                    Object.assign(this.$data, this.$options.data())
                    this.getTableData()
                    break;
                case 'audit':
                    this.operateTitle = '审核'
                    this.operateDialog = true
                    this.operateForm.id = row.id
                    break;
                case 'pay':
                    this.operateTitle = '打款'
                    this.operateDialog = true
                    this.operateForm.id = row.id
                    break;
                default:
                    break;
            }
        },
        // 关闭弹框
        closeOperateDialog() {
            this.operateLoading = false
            this.operateDialog = false
            this.operateType = ''
            this.operateTitle = ''
            this.operateForm = this.$options.data().operateForm
        },
        // 操作提交
        operateSubmit() {
            this.$refs.operateForm.validate(valid => {
                if (valid) {
                    let formData = JSON.parse(JSON.stringify(this.operateForm))
                    if (this.operateType === 'audit') {
                        delete formData.paymentVoucherUrl
                        this.operateLoading = true
                        postWithdrawAuditData(formData).then(res => {
                            this.getTableData()
                            this.$message_tip(`${this.operateTitle}成功`, 'success')
                            this.closeOperateDialog()
                        }).catch(error => {
                            this.operateLoading = false
                        })
                    } else if (this.operateType === 'pay') {
                        delete formData.status
                        delete formData.auditRemark
                        this.operateLoading = true
                        postWithdrawPayData(formData).then(res => {
                            this.getTableData()
                            this.$message_tip(`${this.operateTitle}成功`, 'success')
                            this.closeOperateDialog()
                        }).catch(error => {
                            this.operateLoading = false
                        })
                    }
                }
            })
        }
    },
    mounted() {
        this.getTableData()
    }
};
</script>

<style lang="scss" scoped>
</style>